<template>
  <div class="employees-container">
    <!-- 头部 -->
    <page-tools>
      <!-- 插入到left插槽位置 -->
      <template #left>
        <div class="tips">
          <i class="el-icon-info" />
          <span> 共{{ total }}条记录</span>
        </div>
      </template>
      <!-- 插入到right插槽位置 -->
      <template #right>
        <el-button type="warning" size="small" @click="$router.push('/import')">导入excel</el-button>
        <el-button type="danger" size="small">导出excel</el-button>
        <el-button type="primary" size="small" @click="addEmlopee">新增员工</el-button>
      </template>
    </page-tools>

    <!-- 主体 -->
    <el-card style="margin-top: 10px;">
      <!-- 表单 -->
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column type="index" :index="indexMethod" label="序号" width="60" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="workNumber" label="工号" />
        <el-table-column prop="formOfEmployment" label="聘用形式">
          <template #default="{row }">
            {{ formatEmployment(row.formOfEmployment) }}
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column label="入职时间">
          <template #default="{ row }">
            {{ formatDate(row.timeOfEntry) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="checkClick(scope.row)">查看</el-button>
            <el-button type="text" size="small">分配角色</el-button>
            <el-button type="text" size="small" @click="deleteEmlpoyee(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="params.page"
        layout="prev, pager, next"
        :total="total"
        style="margin-top: 10px;"
        :page-size="params.size"
        @current-change="pageChange"
      />
    </el-card>

    <!-- 新增员工对话框 -->
    <add-employee-vue
      ref="addRef"
      :dialogvisible="dialogFormVisible"
      @close-dialog="closeDialog"
      @add-employee="getList"
    />

  </div>
</template>

<script>
import { getEmployeeList, fetchDelEmployee } from '@/api/employees'
import addEmployeeVue from './components/add-employee.vue'
import dayjs from 'dayjs'
export default {
  name: 'Employee',
  components: { addEmployeeVue },
  data() {
    return {
      list: [],
      params: {
        page: 1,
        size: 10
      },
      total: 0,
      dialogFormVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取员工列表
    async getList() {
      const { total, rows } = await getEmployeeList(this.params)
      this.total = total
      this.list = rows
    },
    // 跳转到某一页
    pageChange(val) {
      this.params.page = val
      this.getList()
    },
    // 格式化聘用形式函数
    formatEmployment(type) {
      // 前端枚举
      const map = {
        1: '正式',
        2: '非正式'
      }
      return map[type] ? map[type] : '其他'
    },
    // 入职时间格式化
    formatDate(value, str = 'YYYY-MM-DD') {
      // 使用模块之前，必须加载
      // const dayjs = require('dayjs')
      return dayjs(value).format(str)
    },
    // 查看详情
    checkClick(row) {
      console.log(row)
    },
    // 删除员工
    deleteEmlpoyee(row) {
      this.$confirm('确定要删除当前员工吗？', '温馨提示', {
        type: 'warning',
        callback: async action => {
          console.log(action, row)
          if (action === 'confirm') {
            await fetchDelEmployee(row.id)
            this.$message.success('删除成功!')
            this.getList()
          }
        }
      })
    },
    indexMethod(index) {
      return this.params.size * (this.params.page - 1) + index + 1
    },
    // 新增员工
    addEmlopee() {
      this.dialogFormVisible = true
    },
    // 关闭对话框
    closeDialog() {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang='scss' scoped></style>
